<template>
  <div>
    <el-descriptions :column="4">
      <el-descriptions-item label="单据编号"
        ><span class="text--info">{{
          basicInfoData?.billNum
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="单据名称"
        ><span class="text--info">{{
          basicInfoData?.billName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="创建人"
        ><span class="text--info">{{
          basicInfoData?.createUserName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="创建时间"
        ><span class="text--info">{{
          basicInfoData?.createTime
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="验收类型"
        ><span class="text--info">{{
          formatterStatusType(basicInfoData?.flowType)
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="项目名称"
        ><span class="text--info">{{
          basicInfoData?.projectName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="合同名称"
        ><span class="text--info">{{
          basicInfoData?.contractName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方单位"
        ><span class="text--info">{{
          basicInfoData?.partyA
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="甲方负责人"
        ><span class="text--info">{{
          basicInfoData?.directorAName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="乙方单位"
        ><span class="text--info">{{
          basicInfoData?.partyB
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="乙方负责人"
        ><span class="text--info">{{
          basicInfoData?.directorBName
        }}</span></el-descriptions-item
      >
      <el-descriptions-item label="到货时间"
        ><span class="text--info">{{
          basicInfoData?.arrivalDate
        }}</span></el-descriptions-item
      >
    </el-descriptions>
    <!-- <el-row>
      <el-col :span="24"> -->
    <div class="col__wrap">
      <div class="col__wrap--title">附件</div>
      <div class="col__wrap--content">
        <span class="text--info">
          <el-link
            type="primary"
            v-for="item in basicInfoData?.sbclqdAttachmentArr"
            :key="item?.uuidFile"
            icon="el-icon-folder"
            @click.prevent="handleDownload(item)"
          >
            {{ item?.fileName }}&emsp;
          </el-link>
        </span>
      </div>
    </div>
    <!-- </el-col>
    </el-row> -->
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import { download } from "/@/utils/download";
import { BillStatusMap } from "../../types";

defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  }
});

const handleDownload = item => {
  if (!item) return;
  download(item);
};

// 格式化类型
const formatterStatusType = row => {
  return BillStatusMap.get(row);
};
</script>

<style lang="scss" scoped>
.col__wrap {
  display: flex;
  &--title {
    font-size: 12px;
    color: #606266;
  }
  &--content {
    font-size: 12px;
    padding: 0 8px;
    margin-left: 10px;
  }
  :deep .el-link {
    margin-bottom: 5px;
    display: block;
  }
}
.text--info:empty::before {
  content: "-";
  color: gray;
}
</style>
